<template>
  <div class="category-letter _page _container">
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs"
    />

    <UiSectionTitle
      :title="h1"
      :count="categories?.length"
      class="_title"
      icon="grid"
    />

    <div class="_nav-filter">
      <CategoryNav
        v-if="categoriesGroupByLetter"
        :items="categoriesGroupByLetter as IChipsItem[]"
      />
      <div
        v-else
        class="category-letter__loading _loading"
      />
    </div>


    <UiLetter
      v-if="slug"
      :text="slug"
      class="category-letter__title"
    />
    <CategoryList
      v-if="categories && status !== 'pending'"
      :items="categories"
    />
    <div
      v-else
      class="category-letter__loading _loading"
    />
  </div>
</template>

<script setup lang="ts">
import type { IBreadcrumbItem, IChipsItem } from '../../../types';
import { convertString, AsyncData } from '../../../runtime';
import { CategoriesApiService } from '../../../services/api/categories.service';

const [
  { data: categories, status },
  { data: categoriesGroupByLetter },
] = await Promise.all([
  useFetchCategoriesByLetter(CategoriesApiService.getCategoriesByLetter),
  useFetchCategoriesGroupByLetter(AsyncData.GroupsCategoriesByLetterChips, CategoriesApiService.getListGroupedByLetterChips),
]);
const { t } = useI18n();

const route = useRoute();
const slug = computed(() => route.params[ 'slug' ] as string || '');

const pagePureName = useGetPureRouteName();
const metaTitle = computed(() => convertString().toCapitalize(slug.value));
const { meta, h1 } = useMeta({
  t,
  pageKey: pagePureName,
  brandName: useAppConfig().brandName,
  sortOptions: [],
  text: metaTitle,
});

watchEffect(() => {
  useHead(meta.value);
});

const breadcrumbs = [
  {
    name: `${t('navigation.main')}`,
    to: '/',
  },
  {
    name: `${t('navigation.categories')}`,
    to: '/categories',
  },
  {
    name: metaTitle.value,
  },
] as IBreadcrumbItem[];
</script>

<style lang="scss">
.category-letter__loading {
  height: 100%;
  min-height: 30vh;
}

.category-letter__title {
  margin-bottom: 12px;
}
</style>
